<template>
    <div class="Preson">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄{{ age }}</h2>
        <h2>电话：{{ tel }}</h2>
        <button @click="ChangeName">修改名字</button>
        <button @click="ChangeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
    </template>
    
    <script lang="ts">
    export default {
        name: 'Preson',
        setup() {
            // console.log(this);//setup函数里的this是undefinded , vue3弱化了this
            
            // 数据  目前的数据不是响应式的
            let name = '张三'
            let age = 20
            let tel = '123131414423'

            // 方法
           function showTel() {
               alert(tel)
            };
            function ChangeName() {
                name = 'zhang-san'//修改name，页面没有变化
                console.log(name);//name确实改了，但不是响应式数据
               
            };
            function ChangeAge() {
               age += 1
            };
            return {name,age,tel,showTel,ChangeName,ChangeAge}
        }
    }
    </script>
    
    <style scoped>
    .Preson{
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 10px;
    }
    </style>